<template>
  <!-- GmatPage 代报名 -->
  <PageContainer>
    <view class="gmat-page">
      <Tabs v-model="currentTab">
        <Header title="代报名" :isBoxShadow="false">
          <TabNav tabBarColor="#ef833a" />
        </Header>
        <TabsItem name="本单位" :value="0">
          <MyUnit :activityId="activityId" />
        </TabsItem>
        <TabsItem name="其他人员" :value="1">
          <Other :activityId="activityId" :memberOpen="memberOpen" />
        </TabsItem>
      </Tabs>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  GmatPage  代报名 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import Tabs from '@/components/tabs/index.vue';
  import TabsItem from '@/components/tabs/item.vue';
  import TabNav from '@/components/tabs/nav.vue';
  import { ref } from 'vue';
  import MyUnit from './components/MyUnit.vue';
  import Other from './components/Other.vue';
  import { onUnload } from '@dcloudio/uni-app';

  let callback!: () => void;
  const currentTab = ref(0);
  const activityId = ref<number>();
  const memberOpen = ref<number>();

  onLoad<'GmatPage'>((op) => {
    callback = op.callback;
    memberOpen.value = op.memberOpen;
    activityId.value = op.activityId;
  });

  onUnload(() => callback?.());
</script>

<style lang="scss" scoped>
  .gmat-page {
    &-statistics {
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;
      color: #aaabab;
      font-size: 23rpx;

      .add-btn {
        color: #4489ff;
        height: 100%;
        line-height: 70rpx;
      }
    }

    &-item {
      height: 120rpx;
      background-color: #fff;
      position: relative;
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &::before {
        content: '';
        width: calc(100% - 60rpx);
        height: 1px;
        background-color: #dddddd;
        position: absolute;
        left: 30rpx;
        bottom: 0;
      }

      &:nth-last-child(2) {
        &::before {
          display: none;
        }
      }

      &_info {
        display: flex;
        align-items: center;
        font-size: 23rpx;
        color: #333;

        .avatar {
          width: 58rpx;
          height: 58rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10rpx;
        }

        .name {
          min-width: 100rpx;
          max-width: 300rpx;
          margin-right: 20rpx;
        }
      }

      &_btn {
        .status-btn {
          width: 165rpx;
          height: 58rpx;
          border-radius: 29rpx;
          line-height: 58rpx;
          color: #fff;
          font-size: 27rpx;
        }
      }
    }
  }
</style>
